<template>
  <div class="custom-bread-crumb">
    <!--<Breadcrumb :style="{fontSize: `${fontSize}px`}">-->
    <!--<BreadcrumbItem v-for="item in list" :to="item.to" :key="`bread-crumb-${item.name}`">-->
    <!--<common-icon style="margin-right: 4px;" :type="item.icon || ''"></common-icon>-->
    <!--{{ showTitle(item) }}-->
    <!--</BreadcrumbItem>-->
    <Tabs @on-click="changeMenuRouter">
      <TabPane
        v-for="item in menuItems"
        :label="item.label"
        :icon="item.icon"
        :name="item.type"
      >
      </TabPane>
    </Tabs>
    <!--</Breadcrumb>-->
  </div>
</template>
<script>
  import {showTitle} from '@/libs/util'
  import CommonIcon from '_c/common-icon'
  import './custom-bread-crumb.less'

  export default {
    name: 'customBreadCrumb',
    components: {
      CommonIcon
    },
    data: () => ({
      menuItems: [
        {label: "系统", icon: "ios-home-outline", type: "sys"},
        {label: "表单", icon: "ios-list-box-outline", type: "form"},
        {label: "日志", icon: "ios-locate-outline", type: "log"},
      ]
    }),
    props: {
      list: {
        type: Array,
        default: () => []
      },
      fontSize: {
        type: Number,
        default: 14
      },
      showIcon: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      showTitle(item) {
        return showTitle(item, this)
      },
      isCustomIcon(iconName) {
        return iconName.indexOf('_') === 0
      },
      getCustomIconName(iconName) {
        return iconName.slice(1)
      },
      /**
       * 改变菜单路由
       * @param type
       */
      changeMenuRouter(type) {
        //sys系统 form表单 log日志
        console.log("你选择了" + type);
        let main = this.$parent.$parent.$parent.$parent.$parent;
        main.changeMenuTab(type);
        return main.menuList;

      }
    }
  }
</script>
